<template>
  <div ref="serviceTabRef">
    <el-tabs v-model="activeName" type="border-card" @tab-click="getList">
      <el-tab-pane v-for="item in tabsList" :key="item.name" :label="item.label" :name="item.name">
        <el-table ref="table" :data="tableData" border>
          <el-table-column v-if="!detail" align="center" prop="prjCode" label="单项工程编码" width="200" />
          <el-table-column align="center" prop="siteId" label="站址编码" width="200" />
          <el-table-column align="center" prop="pmsServiceCode" label="物料编码" width="200" />
          <el-table-column align="center" prop="pmsServiceName" label="物料名称" show-overflow-tooltip />
          <el-table-column align="center" prop="sumMoney" width="150" label="累计验工计价金额" />
          <el-table-column label="操作" align="center" width="200">
            <template slot-scope="scope">
              <el-button class="pms-button-primary operate-btn" @click="handleConfiguration(scope.row, false)">
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <ServiceConfigDetails ref="details" />
  </div>
</template>

  <script>
  import {servDetailPrjsCheck,getSiteService} from '@/api/acceptanceManagement'
  import { parseParams } from '@/utils'
  import ServiceConfigDetails from '@/views/acceptanceManagement/servicecodeDetailConfig/ServiceConfigDetails.vue'

  export default {
    name: 'ServiceTabs',
    components: {
      ServiceConfigDetails
    },
    props: ['detail', 'prjId', 'subPrjIds'],
    data() {
      return {
        activeName: '1',
        tableData: [],
        tabsList: [
          { label: '总包服务', name: '1' },
          { label: '外电引入施工服务', name: '2' },
          { label: '砖混/框架机房服务', name: '3' }
        ],
        urlParams: {
          prjId: null,
          subPrjId: null,
          ifEdit: '1',
          type: null,
          isWhite: false,
          ifSingleProject: '',
          projectPilots: [],
          isPilot: ''
        },
        row: {}
      }
    },
    async created() {
      this.handleQuery()
    },

    methods: {
      // 配置明细 or 查看
      handleConfiguration(row, editable) {
        this.urlParams.isPilot = this.urlParams.projectPilots.find(item => item.prjId === row.subPrjId).isPilot
        this.$refs['details'].getRow({ ...row, type: this.activeName, editable, urlParams: this.urlParams })
      },
      async handleQuery() {
        const { data } = await servDetailPrjsCheck(this.subPrjIds)
        this.urlParams.projectPilots = data
        this.$nextTick(() => {
          this.getList({ name: '1' })
        })
      },
      getList(val) {
        const obj = {
          prjId: this.prjId,
          ifSingleProject: 1,
          subPrjIds: this.subPrjIds,
          type: val.name
        }
        getSiteService(obj).then(res => {
          this.tableData = res.data
          this.$nextTick(() => {
            const h = this.$refs.serviceTabRef.clientHeight
            const pageHeight = this.tableData.length ? h : 260
            window.parent.postMessage({ height: pageHeight, type: 'serviceHeight' }, this.$fixIframeArr())
            this.$refs['table'][val.name - 1].doLayout()
          })
        })
      }
    }

  }
  </script>
  <style lang="scss" scoped>
  .tips {
    margin-bottom: 10px;
    color: #EB4B4B;
  }
  </style>
